window.onload = function () {
    const imgList = document.querySelectorAll('.imglist a');
    const dots = document.querySelectorAll('.btnlist span');
    const leftBtn = document.querySelector('.leftBtn');
    const rightBtn = document.querySelector('.rightBtn');
    let currentIndex = 0;

    // 显示指定索引的图片
    function showImage(index) {
        imgList.forEach((img, i) => {
            img.classList.remove('show');
            dots[i].classList.remove('che');
        });
        imgList[index].classList.add('show');
        dots[index].classList.add('che');
    }

    // 下一张
    function nextImage() {
        currentIndex = (currentIndex + 1) % imgList.length;
        showImage(currentIndex);
    }

    // 上一张
    function prevImage() {
        currentIndex = (currentIndex - 1 + imgList.length) % imgList.length;
        showImage(currentIndex);
    }

    // 左右按钮事件绑定
    leftBtn.addEventListener('click', prevImage);
    rightBtn.addEventListener('click', nextImage);

    // 圆点点击事件
    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            currentIndex = index;
            showImage(currentIndex);
        });
    });

    // 自动播放
    let autoPlayInterval = setInterval(nextImage, 3000); // 每3秒切换

    // 鼠标悬停停止自动播放
    const box = document.querySelector('.box');
    box.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));
    box.addEventListener('mouseleave', () => autoPlayInterval = setInterval(nextImage, 3000));

};

function showImage(index) {
    imgList.forEach((img, i) => {
        img.classList.remove('show');
        dots[i].classList.remove('che');
    });
    // 使用延时避免同时淡出淡入冲突
    setTimeout(() => {
        imgList[index].classList.add('show');
    }, 50);
    dots[index].classList.add('che');
};

function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.style.width = `${Math.random() * 6 + 2}px`;
    snowflake.style.height = snowflake.style.width;
    snowflake.style.top = `${Math.random() * 100}%`;
    snowflake.style.left = `${Math.random() * 100}%`;
    snowflake.style.borderRadius = '70%';
    snowflake.style.backgroundColor = `rgba(255, 255, 255, ${Math.random()})`;
    snowflake.style.opacity = Math.random();
    snowflake.style.transform = `rotate(${Math.random() * 360}deg)`;

    // 设置雪花下落动画
    const startX = Math.random() * 100;
    const endX = Math.random() * 100;
    const startY = Math.random() * 100;
    const endY = 100 + Math.random() * 20;

    snowflake.animate([
        { top: `${startY}%`, left: `${startX}%`, transform: `rotate(0deg)` },
        { top: `${endY}%`, left: `${endX}%`, transform: `rotate(${Math.random() * 360}deg)` }
    ], {
        duration: 3000,
        easing: 'linear',
        iterations: Infinity
    });

    document.querySelector('.snow-container').appendChild(snowflake);

    // 如果雪花数量超过限制，移除最早的雪花
    const maxSnowflakes = 150; // 最大雪花数量
    const snowflakes = document.querySelectorAll('.snowflake');
    if (snowflakes.length > maxSnowflakes) {
        snowflakes[0].remove();
    }
}

// 动态调整生成雪花的频率
function generateSnowflakes() {
    const interval = Math.random() * 100 + 50; // 随机生成频率，范围在50-150毫秒之间
    setTimeout(() => {
        createSnowflake();
        generateSnowflakes(); // 递归调用，持续生成雪花
    }, interval);
}

// 开始生成雪花
generateSnowflakes();
